<!--
 * @Author: Haochen
 * @Date: 2021-12-15 11:20:46
 * @LastEditTime: 2021-12-26 16:47:16
 * @FilePath: \recipes-admin-system\src\components\charts\MenuViewsCount.vue
-->

<template>
  <div class="menu-views-chart"></div>
</template>

<script>
import * as echarts from 'echarts';
import { createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('recipes');
var myChart;

export default {
  data() {
    return {
      menus: [],
    };
  },

  mounted() {
    myChart = echarts.init(document.querySelector('.menu-views-chart'));
  },
  created() {
    this.findAllMenu();
  },

  methods: {
    ...mapActions(['findAllMenuAsync']),
    async findAllMenu() {
      const res = await this.findAllMenuAsync();
      this.menus = res;
      // console.log(res);
    },
  },
  computed: {
    chartData() {
      return {
        title: {
          text: '各菜谱浏览量比较',
        },

        tooltip: {},
        xAxis: {
          data: this.menus.map((m) => m.name),
          axisLabel: {
            //坐标轴刻度标签的相关设置。
            interval: 0,
            rotate: '45',
          },
        },
        yAxis: {},
        series: [
          {
            name: '浏览量',
            type: 'bar',
            data: this.menus.map((m) => m.pageview),
            itemStyle: {
              normal: {
                color: function (params) {
                  // build a color map as your need.
                  var colorList = [
                    '#7799fa',
                    '#f44887',
                    '#6f5ee3',
                    '#75d996',
                    '#f0ad4e',
                    '#45C2E0',
                    '#C1EBDD',
                    '#FFC851',
                    '#5A5476',
                    '#1869A0',
                    '#FF9393',
                  ];
                  return colorList[params.dataIndex % colorList.length];
                },

                // color: '#7799fa',
              },
            },
          },
        ],
      };
    },
  },
  watch: {
    menus() {
      myChart.setOption(this.chartData);
    },
  },
};
</script>

<style scoped>
.menu-views-chart {
  width: 519px;
  height: 400px;
}
</style>
